<template>
  <!--数据展示-->
  <div class="top">
    <el-table :key="sid" :data="adviseList" :empty-text="BaseConfig.emptyText" cell-class-name="pp"
      header-cell-class-name="pp" stripe style="width: 100%" table-layout="fixed">
      <el-table-column label="#" type="index" />
      <el-table-column label="编号" prop="adviseId" width="100" />
      <el-table-column label="内容">
        <template #default="scope">
          <el-text truncated>{{ scope.row.context }}</el-text>
        </template>
      </el-table-column>
      <el-table-column label="提出日期">
        <template #default="scope">
          <el-text truncated>{{ dealDate(scope.row.createTime) }}</el-text>
        </template>
      </el-table-column>
      <el-table-column label="处理状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === '同意'">{{ scope.row.status }}</el-tag>
          <el-tag v-else-if="scope.row.status === '拒绝'" type="info">{{ scope.row.status }}</el-tag>
          <el-tag v-else type="warning">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template #default="scope">
          <el-text truncated>{{ scope.row.reply }}</el-text>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button link type="primary" @click="detailsClick(scope.row)">
            查看
          </el-button>
          <el-button link type="primary" @click="tableReplyClick(scope.row)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--分页组件-->
  <div class="bottom">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="stotal" hide-on-single-page
      layout="total, prev, pager, next" @current-change="handleCurrentChange" />
  </div>
  <!--抽屉组件-->
  <el-drawer v-model="adviseDrawer" destroy-on-close size="20%" title="建议详情">
    <div class="details">
      <div class="center">{{ publicForm.adviseId }}</div>
      <el-divider content-position="left">建议内容</el-divider>
      <div class="advise">{{ publicForm.context }}</div>
      <el-divider content-position="right">{{ dealDateTime(publicForm.createTime as string) }}</el-divider>
      <div style="margin: 50px 0" />
      <el-divider content-position="left">备注内容</el-divider>
      <div>{{ publicForm.reply }}</div>
    </div>
  </el-drawer>
  <!--弹出框组件-->
  <el-dialog v-model="dialogVisible" :before-close="dialogBeforeClose" title="请耐心回复" width="20%">
    <div class="dialog">
      <el-divider content-position="left">建议内容</el-divider>
      <div style="text-indent: 2em">{{ publicForm.context }}</div>
      <el-divider content-position="center">处理详情</el-divider>
      <div class="form">
        <el-form ref="formRef" :model="publicForm" :rules="rules" hide-required-asterisk>
          <el-form-item label="处理意见" prop="status">
            <el-select v-model="publicForm.status" placeholder="请输入处理意见">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注内容" prop="reply">
            <el-input v-model="publicForm.reply" maxlength="200" placeholder="请输入备注内容" show-word-limit type="textarea" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogAlterClick(formRef)">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup>
// ok 2023-4-2 21:53:建议列表的处理信息以及个人中心页面
import { BaseConfig } from '@/config/config'
import { dealDate, dealDateTime } from '@/utils/commonUtils'
import { AdviseService } from '@/api'
import { onMounted, ref, watch } from 'vue'
import { Advise } from '@/ts/type'
import { adviseInit, rules, twoOptions } from '@/config/formConfig'
import { FormInstance } from 'element-plus'
import { Message, Notification } from '@/plugins/element'
import { EventBus } from '@/utils/mitt'

const search = ref<boolean>(false)
const formRef = ref<FormInstance>()
const adviseList = ref<Advise[]>([])
const currentPage = ref<number>(1)
const pageSize = ref<number>(13)
const stotal = ref<number>(0)
const adviseDrawer = ref(false)
const publicForm = ref<Advise>({ ...adviseInit })
const dialogVisible = ref<boolean>(false)
const sid = ref<number>(0)
let form: Advise = { ...adviseInit }
const options = twoOptions
// 获取建议列表
const getAdviseList = async () => {
  await AdviseService.advisePage(currentPage.value, pageSize.value).then(res => {
    const { total, list } = res.data
    adviseList.value = list
    stotal.value = total
  })
}

// 表单回复点击
const tableReplyClick = async (row: Advise) => {
  const { adviseId } = row
  publicForm.value = { ...adviseInit }
  await AdviseService.selectByPrimaryKey(adviseId as number).then(res => {
    publicForm.value = res.data
    publicForm.value.status = ''
    publicForm.value.reply = ''
  })
  dialogVisible.value = !dialogVisible.value
}

// 查看详情点击
const detailsClick = (row: Advise) => {
  adviseDrawer.value = !adviseDrawer.value
  publicForm.value = row
}

// 弹出框修改点击
const dialogAlterClick = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async valid => {
    if (valid) {
      await AdviseService.postAdvise(publicForm.value).then(async res => {
        console.log(res)
        publicForm.value = form
        await getUpdateList()
        Notification.success(res.data)
      })
      dialogVisible.value = !dialogVisible.value
    } else {
      Message.error('请检查输入内容')
    }
  })
}

// 搜索建议
const searchAdvise = () => {
  AdviseService.inquiry(form, currentPage.value, pageSize.value).then(res => {
    const { total, list } = res.data
    adviseList.value = list
    stotal.value = total
  })
}

// 弹出框关闭
const dialogBeforeClose = () => {
  publicForm.value = { ...adviseInit }
  dialogVisible.value = !dialogVisible.value
}

const getUpdateList = () => {
  if (search.value) {
    searchAdvise()
  } else {
    getAdviseList()
  }
}

// 更改页码
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getUpdateList()
}

// 监听总线
EventBus.on('adviseSearch', res => {
  form = { ...adviseInit }
  search.value = true
  form = res
  searchAdvise()
})

EventBus.on('reGetAdvise', res => {
  form = { ...adviseInit }
  search.value = res
  getAdviseList()
})

onMounted(() => {
  getAdviseList()
})

watch(adviseList.value, (newVal: Advise[]) => {
  newVal.forEach(value => {
    sid.value = value.adviseId as number
  })
})
</script>

<style lang='scss' scoped>
:deep(.pp) {
  text-align: center;
}

.top {
  flex: 1;
}

.bottom {
  height: 30px;
  margin: 15px auto 0;
}

.details {
  div {
    text-indent: 2em;
    margin: 20px 0;
    line-height: 1.5em;
  }

  .center {
    text-align: center;
  }

  .advise {
    min-height: 200px;
  }
}
</style>